<!-- <template>
    <div>
        <div ref="exam" style="width: 840px; height: 450px;"></div>
    </div>
</template>

<script lang='ts' setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';

const exam = ref<HTMLElement>()
const myChart = ref<any>()

function initBarEcharts() {
    myChart.value = echarts.init(exam.value!);

    const labelSetting: echarts.PictorialBarSeriesOption['label'] = {
        show: true,
        position: 'right',
        offset: [10, 0],
        fontSize: 16
    };

    myChart.value.setOption({
        title: {
            text: '居民标签'
        },
        legend: {
            data: ['2015']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            containLabel: true,
            left: 20
        },
        yAxis: {
            data: ['reindeer', 'ship', 'plane', 'train', 'car'],
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
                margin: 30,
                fontSize: 14
            },
            axisPointer: {
                label: {
                    show: true,
                    margin: 30
                }
            }
        },
        xAxis: {
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false }
        },
        series: [
            {
                // name: '2015',
                type: 'pictorialBar',
                label: labelSetting,
                symbolRepeat: true,
                symbolSize: ['80%', '60%'],
                barCategoryGap: '40%',
                data: [
                    {
                        value: 157,
                        //   symbol: pathSymbols.reindeer
                    },
                    {
                        value: 21,
                        //   symbol: pathSymbols.ship
                    },
                    {
                        value: 66,
                        //   symbol: pathSymbols.plane
                    },
                    {
                        value: 78,
                        //   symbol: pathSymbols.train
                    },
                    {
                        value: 123,
                        //   symbol: pathSymbols.car
                    }
                ]
            }
        ]
    })
}



onMounted(() => {
    initBarEcharts();
});

</script>

<style lang='scss' scoped></style> -->
<template>
    <div class="demo-progress">
        <el-progress :percentage="50" />
        <el-progress :percentage="100" :format="format" />
        <el-progress :percentage="100" status="success" />
        <el-progress :percentage="100" status="warning" />
        <el-progress :percentage="50" status="exception" />
    </div>
</template>
  
<script lang="ts" setup>
const format = (percentage: any) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>
  
<style scoped>
.demo-progress .el-progress--line {
    margin-bottom: 15px;
    width: 350px;
}
</style>